<template>

	<a-row :gutter="10" class="mb-2">
		<a-col :span="24">
			<a-card :bordered="false">
				<a-space>
					<a-input-search placeholder="请输入内容" v-model:value="search" @search="queryList"></a-input-search>
					<a-button @click="add" type="primary">新增</a-button>
				</a-space>
			</a-card>
		</a-col>
	</a-row>


	<a-row :gutter="10">
		<a-col :span="24">
			<a-space  :size="[16, 16]" wrap>
				<a-card :bordered="false" v-bind:key="api.id" v-for="api in cardList" class="box-card"
					style="width: 300px;">
					<template #title>
						<div class="card-header">
							<a-space>
								<a-tag @click="edit(api)">{{ api.productName }}</a-tag>
								<span>{{ api.productCode }}</span>
							</a-space>
						</div>
					</template>
					<template #extra>
						<a-tag type="info">{{ api.orgName }}</a-tag>
					</template>
					<div class="demo3">
						<a-space class="demo3-content">
							<span>{{ api.description ? JSON.parse(api.description).main[0]?.value : '' }}</span>
							<span>
								<a-image v-if="api.icon" style="width: 30px; height: 30px" :src="api.icon" />
							</span>

						</a-space>

						<a-space class="demo3-footer" :size="40" style="bottom: 0">
							<!-- <Button type="success" @click="editDescription(api)">简介</Button> -->
							<a-tooltip title="简介" @click="editDescription(api)" placement="bottomRight">
								<svg t="1714873395443" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="10951" width="20" height="20">
									<path
										d="M907.68254 1024h-791.36508c-40.126984 0-72.634921-32.507937-72.63492-72.126984V72.126984c0-39.619048 32.507937-72.126984 72.63492-72.126984H720.253968c14.222222 0 25.396825 11.174603 25.396826 25.396825s-11.174603 25.396825-25.396826 25.396826h-603.936508c-12.190476 0-21.84127 9.650794-21.84127 21.333333v879.746032c0 11.68254 9.650794 21.333333 21.84127 21.333333h791.36508c12.190476 0 21.84127-9.650794 21.84127-21.333333V277.84127c0-14.222222 11.174603-25.396825 25.396825-25.396826s25.396825 11.174603 25.396825 25.396826v673.523809c0 40.126984-32.507937 72.634921-72.63492 72.634921z"
										fill="#012733" p-id="10952"></path>
									<path
										d="M766.47619 474.920635c-14.222222 0-25.396825-11.174603-25.396825-25.396825v-213.333334c0-2.539683-1.52381-3.555556-1.523809-3.555555h-218.920635c-14.222222 0-25.396825-11.174603-25.396826-25.396826s11.174603-25.396825 25.396826-25.396825h218.920635c28.952381 0 52.31746 24.380952 52.31746 54.349206v213.333334c0 14.222222-11.174603 25.396825-25.396826 25.396825zM513.015873 467.809524h-208.253968c-14.222222 0-25.396825-11.174603-25.396826-25.396826s11.174603-25.396825 25.396826-25.396825h208.253968c14.222222 0 25.396825 11.174603 25.396825 25.396825s-11.68254 25.396825-25.396825 25.396826zM751.238095 841.650794h-461.714285c-14.222222 0-25.396825-11.174603-25.396826-25.396826s11.174603-25.396825 25.396826-25.396825h461.714285c14.222222 0 25.396825 11.174603 25.396826 25.396825s-11.68254 25.396825-25.396826 25.396826z"
										fill="#012733" p-id="10953"></path>
								</svg>
							</a-tooltip>

							<!--							<a-tooltip title="产品过程" @click="openDocumentBook(api)" placement="bottomRight">-->
							<!--								<svg t="1718955230794" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
							<!--									 xmlns="http://www.w3.org/2000/svg" p-id="5627" width="20" height="20">-->
							<!--									<path-->
							<!--										d="M194 877.7c-11 0-20.3-9.3-20.3-20.2V344.8h134.8c51.4 0 93.2-41.7 93.2-93V117.3h322.4c11 0 20.3 9.3 20.3 20.2v423c25.2 0 49.7 3.4 73 9.7V137.5c0-51.3-41.8-93-93.2-93H356.4c-3.5 0-8.2 2-10.7 4.4l-44.4 44.3c-0.7 0.7-1.4 1.2-2.1 1.9L151.6 242.6c-0.7 0.7-1.3 1.4-2 2.2L105.2 289c-2.4 2.4-4.4 7.2-4.4 10.6v557.8c0 51.3 41.8 93 93.2 93h294.4c-9.9-22.8-16.9-47.3-20.4-72.8H194z m19.5-610.2l110.9-110.6c2.4-2.4 4.4-1.6 4.4 1.8v93c0 11-9.3 20.2-20.3 20.2h-93.2c-3.4 0-4.2-1.9-1.8-4.4zM655 907.1h152v36.6H655z"-->
							<!--										fill="#1A1A1A" p-id="5628"></path>-->
							<!--									<path-->
							<!--										d="M655 896.5h152v-94.1h116.3L729.1 599 538.6 801.9H655zM655 954.9h152v24.6H655zM436.9 155.5h139.9v53.8H436.9zM605.4 155.5h96.7v90.9h-96.7zM233 688.4h96.7v90.9H233zM436.9 278.1h265.2v53.8H436.9zM233 379.6h469.1v53.8H233zM233 486.8h469.1v53.8H233zM366.1 725.5v53.8h96.2c3-18.7 7.9-36.7 14.6-53.8H366.1zM580.7 599H233v53.8h286.8c17.3-20.9 37.9-39.1 60.9-53.8z"-->
							<!--										fill="#1A1A1A" p-id="5629"></path>-->
							<!--								</svg>-->
							<!--							</a-tooltip>-->

							<a-tooltip title="模型" @click="openDataModel(api)" placement="bottomRight">
								<svg t="1714873473894" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="12182" width="20" height="20">
									<path
										d="M992 392v379.2c0 4.8-6.4 14.4-11.2 16L576 976V582.4c0-4.8 4.8-12.8 9.6-14.4l406.4-176m12.8-36.8c-3.2 0-6.4 0-11.2 3.2L572.8 539.2c-16 6.4-28.8 27.2-28.8 44.8v411.2c0 12.8 8 20.8 17.6 20.8 3.2 0 8-1.6 11.2-3.2l422.4-195.2c16-8 28.8-27.2 28.8-44.8V376c0-12.8-8-20.8-19.2-20.8zM32 395.2l406.4 172.8c4.8 1.6 9.6 9.6 9.6 14.4V976L43.2 790.4c-4.8-1.6-11.2-11.2-11.2-16V395.2m-12.8-38.4c-11.2 0-19.2 8-19.2 20.8v395.2c0 17.6 12.8 36.8 28.8 44.8l422.4 193.6c3.2 1.6 8 3.2 11.2 3.2 9.6 0 17.6-8 17.6-20.8V582.4c0-17.6-12.8-36.8-28.8-43.2L28.8 360c-3.2-1.6-6.4-3.2-9.6-3.2z"
										fill="" p-id="12183"></path>
									<path
										d="M992 392v379.2c0 4.8-6.4 14.4-9.6 16L576 976V582.4c0-4.8 4.8-12.8 9.6-14.4l406.4-176m12.8-38.4c-3.2 0-6.4 0-11.2 3.2L572.8 537.6c-16 6.4-28.8 27.2-28.8 44.8v411.2c0 12.8 8 20.8 17.6 20.8 3.2 0 8-1.6 11.2-3.2L995.2 816c16-8 28.8-27.2 28.8-44.8V376c0-14.4-8-22.4-19.2-22.4z"
										fill="" p-id="12184"></path>
									<path
										d="M32 395.2l406.4 172.8c4.8 1.6 9.6 9.6 9.6 14.4V976L41.6 790.4c-4.8-1.6-9.6-11.2-9.6-16V395.2m-12.8-38.4c-11.2 0-19.2 8-19.2 20.8v395.2c0 17.6 12.8 36.8 28.8 44.8l422.4 193.6c3.2 1.6 8 3.2 11.2 3.2 9.6 0 17.6-8 17.6-20.8V582.4c0-17.6-12.8-36.8-28.8-43.2L28.8 360c-3.2-1.6-6.4-3.2-9.6-3.2z"
										fill="" p-id="12185"></path>
									<path
										d="M510.4 84.8c6.4 0 11.2 1.6 12.8 3.2L944 297.6 526.4 481.6c-3.2 1.6-8 3.2-16 3.2s-12.8-1.6-16-3.2L80 297.6 497.6 88c1.6-1.6 6.4-3.2 12.8-3.2m0-32c-9.6 0-20.8 1.6-28.8 6.4l-448 227.2c-16 8-14.4 19.2 1.6 27.2l448 196.8c8 3.2 19.2 4.8 28.8 4.8 9.6 0 20.8-1.6 28.8-4.8L992 312c16-6.4 16-19.2 0-27.2L539.2 59.2c-8-4.8-19.2-6.4-28.8-6.4z"
										fill="" p-id="12186"></path>
								</svg>
							</a-tooltip>

							<!--							<a-tooltip title="接口配置" @click="openApiConfig(api)" placement="bottomRight">-->
							<!--								<svg t="1714873524336" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
							<!--									xmlns="http://www.w3.org/2000/svg" p-id="13180" width="20" height="20">-->
							<!--									<path-->
							<!--										d="M90.06 250.61h0.53c0.72-0.01 67.39-1.05 165.64-1.23 14.11 52.98 62.5 92.13 119.86 92.13 57.15 0 105.38-38.85 119.7-91.53h438.15c17.95 0 32.5-14.55 32.5-32.5s-14.55-32.5-32.5-32.5H495.78c-14.32-52.68-62.55-91.53-119.7-91.53-56.93 0-105.01 38.55-119.54 90.92-98.99 0.18-166.27 1.23-167 1.24-17.95 0.29-32.26 15.07-31.98 33.01 0.29 17.78 14.79 31.99 32.5 31.99z m286.02-92.16c31.35 0 57.07 24.58 58.91 55.47-0.13 1.17-0.2 2.35-0.2 3.55s0.07 2.39 0.2 3.55c-1.85 30.9-27.56 55.47-58.91 55.47-32.55 0-59.03-26.48-59.03-59.03s26.49-59.01 59.03-59.01zM90.07 544.23h488.15c14.32 52.68 62.55 91.53 119.7 91.53 57.36 0 105.75-39.15 119.86-92.13 89.21 0.18 114.51 1.19 114.78 1.21 0.47 0.02 0.94 0.03 1.4 0.03 17.3 0 31.69-13.65 32.45-31.1 0.77-17.93-13.14-33.1-31.07-33.87-1.12-0.05-26.33-1.09-117.88-1.27-14.52-52.37-62.61-90.92-119.54-90.92-57.15 0-105.38 38.85-119.7 91.53H90.07c-17.95 0-32.5 14.55-32.5 32.5s14.55 32.49 32.5 32.49z m607.85-91.53c32.55 0 59.03 26.48 59.03 59.03s-26.48 59.03-59.03 59.03-59.03-26.48-59.03-59.03 26.48-59.03 59.03-59.03zM933.93 774.02H495.78c-14.32-52.68-62.55-91.53-119.7-91.53-56.93 0-105.01 38.56-119.54 90.92-98.99 0.18-166.27 1.23-167 1.24-17.95 0.29-32.26 15.07-31.98 33.01 0.28 17.77 14.78 31.98 32.49 31.98h0.53c0.72-0.01 67.36-1.05 165.64-1.23 14.11 52.98 62.5 92.13 119.86 92.13 57.15 0 105.38-38.85 119.7-91.53h438.15c17.95 0 32.5-14.55 32.5-32.5s-14.55-32.49-32.5-32.49z m-557.85 91.53c-32.55 0-59.03-26.48-59.03-59.03s26.48-59.03 59.03-59.03c31.35 0 57.07 24.58 58.91 55.47-0.13 1.17-0.2 2.35-0.2 3.55 0 1.2 0.07 2.39 0.2 3.55-1.84 30.91-27.55 55.49-58.91 55.49z"-->
							<!--										fill="#2c2c2c" p-id="13181"></path>-->
							<!--								</svg>-->
							<!--							</a-tooltip>-->
							<a-tooltip title="下载接口文档" @click="downloadApiDoc(api)" placement="bottomRight">
								<svg t="1729410178009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3252" width="20" height="20"><path d="M588.6 540.8L521.9 608 415.1 500.5l62.3-62.7-31.1-31.3-62.3 62.6-62.3-62.7-75.6 76.1c-73.9 73.3-81.5 190.7-17.8 273.1L126 863.2l31.1 31.3 102.3-103c35.6 31.3 80.1 44.8 124.6 44.8 53.4 0 106.8-22.4 146.8-62.7l75.6-76.1-57.8-58.2 66.7-67.2-26.7-31.3z m-88.9 197c-31.1 31.3-71.2 49.3-111.2 49.3s-80.1-13.4-106.8-44.8l-4.4-4.5c-57.8-58.2-57.8-156.7 4.4-219.4l40-40.3 218 219.4-40 40.3z m391.4-577.6L860 128.8l-97.9 94C726.5 191.5 682 178 637.5 178c-53.4 0-106.8 22.4-146.8 62.7l-75.6 71.6 289.1 291 71.2-71.6c73.9-73.3 81.5-190.7 17.8-273.1l97.9-98.4zM739.9 496l-35.6 35.8-218-219.4 35.6-35.8c31.1-31.3 71.2-49.3 111.2-49.3s80.1 13.4 106.8 44.8l4.4 4.5c62.3 58.2 57.8 156.7-4.4 219.4z m0 0" fill="#333333" p-id="3253"></path></svg>
							</a-tooltip>
							<a-tooltip title="开发" @click="openConfig(api)" placement="bottomRight">
								<svg t="1714875047563" class="icon" viewBox="0 0 1030 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="15280" width="20" height="20">
									<path
										d="M522.24 976.896c-111.616 0-216.064-43.008-294.912-120.32-10.24-9.728-10.24-26.112-0.512-36.352s26.112-10.24 36.352-0.512c69.12 68.096 161.28 105.984 259.072 105.984 91.136 0 179.2-33.792 247.296-94.72 10.752-9.216 26.624-8.704 36.352 2.048 9.216 10.752 8.704 26.624-2.048 36.352-77.824 69.12-177.664 107.52-281.6 107.52zM908.8 661.504c-2.048 0-3.584 0-5.632-0.512-13.824-3.072-22.528-16.896-19.456-30.72 5.12-23.04 7.68-47.616 7.68-73.728 0-163.328-109.056-309.248-265.728-354.816-13.824-4.096-21.504-18.432-17.408-31.744 4.096-13.312 18.432-21.504 31.744-17.408 85.504 25.088 162.816 78.336 217.088 149.504 55.808 73.728 85.504 161.792 85.504 254.464 0 29.696-3.072 58.368-8.704 84.992-2.56 11.776-13.312 19.968-25.088 19.968zM135.68 662.528c-11.776 0-22.528-8.704-25.088-20.48-5.632-29.696-8.704-57.856-8.704-85.504 0-185.856 118.784-347.136 295.936-401.92 13.312-4.096 27.648 3.584 32.256 16.896 4.096 13.312-3.584 27.648-16.896 32.256-155.648 48.128-260.096 189.44-260.096 352.768 0 24.064 2.56 49.152 7.68 75.264 2.56 13.824-6.144 27.136-19.968 30.208-2.048 0.512-3.584 0.512-5.12 0.512z"
										p-id="15281"></path>
									<path
										d="M519.168 301.056c-76.8 0-139.264-62.464-139.264-139.264S442.368 22.528 519.168 22.528s139.264 62.464 139.264 139.264-62.464 139.264-139.264 139.264z m0-227.328c-48.64 0-88.064 39.424-88.064 88.064s39.424 88.064 88.064 88.064 88.064-39.424 88.064-88.064-39.424-88.064-88.064-88.064zM869.376 887.296c-35.84 0-70.144-13.824-95.744-38.4-28.16-26.624-43.52-62.464-43.52-100.864 0-76.8 62.464-139.264 139.264-139.264s139.264 62.464 139.264 139.264-62.464 139.264-139.264 139.264z m0-227.328c-48.64 0-88.064 39.424-88.064 88.064 0 24.576 9.728 47.104 27.648 64 16.384 15.36 37.888 24.064 60.416 24.064 48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064zM175.104 887.296c-76.8 0-139.264-62.464-139.264-139.264s62.464-139.264 139.264-139.264 139.264 62.464 139.264 139.264-62.464 139.264-139.264 139.264z m0-227.328c-48.64 0-88.064 39.424-88.064 88.064s39.424 88.064 88.064 88.064 88.064-39.424 88.064-88.064-39.424-88.064-88.064-88.064zM516.608 690.688c-78.336 0-142.336-64-142.336-142.336s64-142.336 142.336-142.336 142.336 64 142.336 142.336-64 142.336-142.336 142.336z m0-233.472c-50.176 0-91.136 40.96-91.136 91.136s40.96 91.136 91.136 91.136 91.136-40.96 91.136-91.136-40.96-91.136-91.136-91.136z"
										p-id="15282"></path>
								</svg>
							</a-tooltip>

							<!--							<a-tooltip title="调度" @click="openJobConfig(api)" placement="bottomRight">-->
							<!--								<svg t="1714881243855" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
							<!--									xmlns="http://www.w3.org/2000/svg" p-id="16306" width="20" height="20">-->
							<!--									<path-->
							<!--										d="M737.28 267.946667c-6.186667 6.293333-14.4 9.386667-22.613333 9.386666s-16.426667-3.093333-22.613334-9.386666L618.666667 194.56V501.333333c0 17.706667-14.293333 32-32 32s-32-14.293333-32-32v-306.773333l-73.386667 73.386667c-6.186667 6.293333-14.4 9.386667-22.613333 9.386666s-16.426667-3.093333-22.613334-9.386666a32 32 0 0 1 0-45.226667l128-128a32 32 0 0 1 45.226667 0l128 128a32 32 0 0 1 0 45.226667zM586.666667 938.666667a32 32 0 0 1-32-32V672a32 32 0 1 1 64 0v234.666667a32 32 0 0 1-32 32z"-->
							<!--										p-id="16307" fill="#2c2c2c"></path>-->
							<!--									<path-->
							<!--										d="M938.666667 586.666667c0 0.853333 0 1.6-0.106667 2.346666-0.106667 0.853333-0.106667 1.706667-0.32 2.453334 0 0.426667-0.106667 0.853333-0.213333 1.28-0.106667 0.96-0.32 1.813333-0.64 2.773333-0.64 2.24-1.493333 4.373333-2.56 6.4-0.96 1.706667-2.133333 3.413333-3.413334 4.906667-0.64 0.853333-1.386667 1.706667-2.133333 2.453333l-128 128c-6.186667 6.293333-14.4 9.386667-22.613333 9.386667s-16.426667-3.093333-22.613334-9.386667a32 32 0 0 1 0-45.226667l73.386667-73.386666H256c-94.08 0-170.666667-76.586667-170.666667-170.666667s76.586667-170.666667 170.666667-170.666667c87.786667 0 160.426667 66.773333 169.706667 152.213334 0.64 6.08 0.96 12.16 0.96 18.453333v53.333333c0 17.706667-14.293333 32-32 32s-32-14.293333-32-32V448C362.666667 389.226667 314.773333 341.333333 256 341.333333S149.333333 389.226667 149.333333 448s47.893333 106.666667 106.666667 106.666667h573.44l-73.386667-73.386667a32 32 0 0 1 0-45.226667 32 32 0 0 1 45.226667 0l126.826667 126.826667c0.426667 0.32 0.746667 0.746667 1.173333 1.173333 0.746667 0.746667 1.493333 1.6 2.133333 2.453334 0.746667 0.746667 1.386667 1.6 1.92 2.56 0.64 0.853333 1.173333 1.813333 1.6 2.666666 1.066667 1.92 1.92 3.946667 2.453334 6.08 0.32 0.853333 0.533333 1.813333 0.64 2.773334 0.106667 0.426667 0.213333 0.853333 0.213333 1.28 0.213333 0.853333 0.32 1.6 0.32 2.453333 0.106667 0.746667 0.106667 1.493333 0.106667 2.346667z"-->
							<!--										p-id="16308" fill="#2c2c2c"></path>-->
							<!--									<path-->
							<!--										d="M394.666667 938.666667a32 32 0 0 1-32-32V672a32 32 0 1 1 64 0v234.666667a32 32 0 0 1-32 32zM426.666667 437.333333v10.666667c0-6.293333-0.32-12.373333-0.96-18.453333 0.64 2.453333 0.96 5.12 0.96 7.786666z"-->
							<!--										p-id="16309" fill="#2c2c2c"></path>-->
							<!--								</svg>-->
							<!--							</a-tooltip>-->

							<!-- <a-tooltip title="视图" @click="openViewConfig(api)" placement="bottomRight">
															<svg t="1714987343865" class="icon" viewBox="0 0 1024 1024" version="1.1"
																xmlns="http://www.w3.org/2000/svg" p-id="4289" width="20" height="20">
																<path d="M486.996449 646.805v292.123158L127.034973 693.724014v-293.866433z"
																	fill="#2c2c2c" opacity=".7" p-id="4290"></path>
																<path
																	d="M512 0L77.52595 298.000486v427.999028l434.47405 298.000486 434.47405-298.000486V298.000486z m384.91522 692.030546L512 956.311105 127.08478 692.329393V331.969454l384.91522-263.981711 384.91522 263.981711zM906.378715 295.510093l20.421227 52.248456M84.648475 345.915657l21.965271-50.405564"
																	fill="#2c2c2c" p-id="4291"></path>
																<path
																	d="M946.47405 365.938421L512 663.938908 77.52595 365.938421l49.509023-33.968967 384.965027 264.031519 384.91522-264.031519 49.55883 33.968967z"
																	fill="#2c2c2c" p-id="4292"></path>
																<path
																	d="M77.52595 659.755046l434.47405-298.000486 434.47405 298.000486-49.55883 33.968968-384.91522-264.031519-384.965027 264.031519L77.52595 659.755046z"
																	fill="#2c2c2c" p-id="4293"></path>
																<path
																	d="M486.996449 604.318887v380.382704h50.007102l-2.291162-367.333042-47.71594-13.049662zM486.996449 33.172041v380.382704h50.007102l-2.291162-367.333042-47.71594-13.049662z"
																	fill="#2c2c2c" p-id="4294"></path>
															</svg>
														</a-tooltip> -->

							<a-tooltip title="删除" @click="removeById(api.id)" placement="bottomRight">
								<svg t="1714873559185" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="14247" width="20" height="20">
									<path
										d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z"
										fill="#000000" p-id="14248"></path>
								</svg>
							</a-tooltip>
						</a-space>
					</div>
				</a-card>
			</a-space>
		</a-col>

	</a-row>


	<a-modal v-model:open="dsDiag.descriptionFlag" :footer="null" :closable="false" width="100%" height="100%"
		wrap-class-name="full-modal" :afterClose="descriptionDiagClose">
		<WordEditor ref="wordEditor" :value="dsDiag.description" />
	</a-modal>

	<a-modal v-model:open="dsDiag.visible" :closable="false" width="300px">
		<a-form :model="dsDiag">
			<a-form-item label="产品编码">
				<a-input :disabled="dsDiag.id != null" v-model:value="dsDiag.productCode"></a-input>
			</a-form-item>

			<a-form-item label="产品名称">
				<a-input v-model:value="dsDiag.productName"></a-input>
			</a-form-item>

			<a-form-item label="图标">
				<span v-if="dsDiag.icon != null && fileList.length == 0"
					style="position: absolute;left:100px;top:-15px;">
					<a-image style="width: 50px; height: 50px" :src="dsDiag.icon" />
				</span>


				<a-upload ref="upload" v-model:file-list="fileList" :multiple="false" :before-upload="beforeUpload"
					@change="progress">
					<a-button type="primary">
						<upload-outlined></upload-outlined>
						上传
					</a-button>
					<template #itemRender="{ file, actions }">
						<div style="position: absolute;left: 100px;top:-10px;">
							<a-image style="width: 50px; height: 50px" :src="dsDiag.icon" />
						</div>
					</template>
				</a-upload>

			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="dsDiag.visible = false">取 消</a-button>
			<a-button v-if="!dsDiag.viewFlag" type="primary" @click="save">确 定</a-button>
		</template>
	</a-modal>

	<ApiDoc ref="apiDoc"></ApiDoc>

</template>

<script setup name="datasource">
import productApi from '@/api/product/productApi.js'
import WordEditor from '@/components/WordEditor/index.vue';
import { useRouter } from "vue-router";
import ApiDoc from "@/views/restapi/apiDoc.vue";
const search = ref()

const fileList = ref([])
const cardList = ref([])
const apiDoc = ref()
let dsDiag = ref({
	viewFlag: false,
	visible: false,
	descriptionFlag: false
})

const add = () => {
	dsDiag.value.visible = true
}
onMounted(() => {
	queryList();
})

const beforeUpload = () => {
	fileList.value = []
	return false;
}

const editDescription = (r) => {
	dsDiag.value = JSON.parse(JSON.stringify(r))
	dsDiag.value.descriptionFlag = true;
}
const router = useRouter()

const openDataModel = () => {
	router.push({ path: '/datasource/databaseModel' })
}


const downloadApiDoc = async (api) => {
	await apiDoc.value.exportDoc(api);
}
const openDocumentBook = (row) => {
	router.push({
		path: '/office/index', query: {
			id: row.id
		}
	})
}

const openApiConfig = (row) => {
	router.push({
		path: '/restapi/index', query: {
			id: row.id
		}
	})
}
const openJobConfig = (row) => {
	router.push({
		path: '/job/index', query: {
			id: row.id
		}
	})
}
const openViewConfig = (row) => {
	router.push({
		path: '/lowcode/index', query: {
			id: row.id
		}
	})
}

const openConfig = (row) => {
	router.push({
		path: '/process/ide', query: {
			id: row.id
		}
	})
}
const wordEditor = ref();
const descriptionDiagClose = async () => {
	const c = wordEditor.value.getValue();
	dsDiag.value.description = JSON.stringify(c);
	await save();
	wordEditor.value.clear()
}


const progress = (a) => {
	//this.uploadFile = a;
	let file = fileList.value[0].originFileObj
	let reader = new FileReader()
	// abort none 中断读取
	// readAsBinaryString file 将文件读取为二进制码，通常我们将它传送到后端，后端可以通过这段字符串存储文件
	// readAsDataURL file 将文件读取为 DataURL，一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
	// readAsText file, [encoding] 将文件读取为文本，读取的结果即是这个文本文件中的内容
	reader.readAsDataURL(file)
	// onabort 中断时触发
	// onerror 出错时触发
	// onload 文件读取成功完成时触发
	// onloadend 读取完成触发，无论成功或失败
	// onloadstart 读取开始时触发
	// onprogress 读取中
	reader.onload = (e) => {
		// 读取文件内容
		const base64String = e.target.result;
		dsDiag.value.icon = base64String;
		// 接下来可对文件内容进行处理
	}
}


const handleClick = (r) => {
	dsDiag.value = JSON.parse(JSON.stringify(r))
	dsDiag.value.viewFlag = true
	dsDiag.value.visible = true
}

const edit = (r) => {
	dsDiag.value = JSON.parse(JSON.stringify(r))
	dsDiag.value.viewFlag = false
	dsDiag.value.visible = true
}

const removeById = async (id) => {
	await productApi.removeById({ id });
	await queryList();
}

const save = async () => {
	if (dsDiag.value.id) {
		await productApi.edit(dsDiag.value)
	} else {
		await productApi.add(dsDiag.value)
	}
	dsDiag.value = {}

	await queryList();
}

const queryList = async () => {
	const data = await productApi.list()
	cardList.value = data;
}
</script>

<style scoped lang="less">
.full-modal {
	.ant-modal {
		max-width: 100%;
		top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	.ant-modal-content {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}

	.ant-modal-body {
		flex: 1;
	}
}

.demo3 {
	height: 155px;
}

.demo3-content {
	overflow: auto;
	width: 100%;
	height: calc(80%);
}
</style>
